<template>
  <div >
      <el-row >
        <el-col span="8" style="text-align: center">
          <el-button  @click="open(blogID,-1)" style="border: 0px">
            <i style="font-size: x-large" class="fa fa-comments-o" aria-hidden="true">
              <i style="font-size: small;padding-right: 10%">{{Num.commentNum}}</i>
            </i>
          </el-button>
        </el-col>
        <el-col span="8">
          <el-button @click="review(data,1)" style="border: 0px" >
            <i style="font-size: x-large" class="fa fa-comment-o" aria-hidden="true" ></i>
          </el-button>
        </el-col>
        <el-col span="8" class="review">
          <el-button v-if="!isLiked" @click="thumbsUp()" style="border: 0px" :disabled="isDisable">
            <i style="font-size: x-large" class="fa fa-thumbs-o-up" aria-hidden="true"  >
              <i style="font-size: small;padding-right: 10%">{{Num.likesNum}}</i>
            </i>
          </el-button>
          <el-button v-if="isLiked"  @click="thumbsUp()">
            <i style="font-size: x-large;color: #409EFF;" class="fa fa-thumbs-o-up" aria-hidden="true" :disabled="isDisable">
              <i style="font-size: small;padding-right: 10%">{{Num.likesNum}}</i>
            </i>
          </el-button>
        </el-col>
      </el-row>
      <div class="block" v-if=view>
        <el-tree
            :data="data"
            :node-key="data.commentId"
            highlight-current="true"
            default-expand-all="true"
          >
          <span class="custom-tree-node" slot-scope="{ node, data }" @click="open(blogID,data.commentId,data)">
            <el-row>
              <el-col span="4">
                <el-avatar  :src=data.authorIcon></el-avatar>
              </el-col>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-col span="20">
                <b>{{data.authorNickName}}</b>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <i>{{data.comment}}</i>
                <br>
                <i>{{data.deployTime}}</i>
              </el-col>
            </el-row>
            <span>
              <div>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => review(data,0)">
                  回复
                </el-button>
              </div>
              <div>
<!--                <el-button-->
<!--                  type="text"-->
<!--                  size="mini"-->
<!--                  @click="() => remove(node, data)">-->
<!--                  删除-->
<!--                </el-button>-->
              </div>
            </span>
          </span>
        </el-tree>
      </div>
  </div>
</template>

<script>
import {getComment,NoThumbsUp,thumbsUp,setComment,getCount} from "@/api/api";
import {getToken} from "@/utils/Token";


let id = 1000;

export default {
  name: "review",
  props:['likeNum','blogID','userId','isLiked'],
  data() {
    return {
      data:[],
      view:false,
      /*限制用户多次点击产生影响*/
      isDisable:false,
      Num:{
        likesNum:0,
        commentNum:0,
      },
    }
  },
  methods: {
    /*点赞*/
    thumbsUp(){
      if(this.userId != getToken('userId') ){
        if(this.isLiked){
          alert('取消该博客点赞');
          NoThumbsUp(getToken('userId'),this.blogID).then((res)=>{
            if(res.data.status === 200){
              this.isLiked = false;
              this.Num.likesNum--;
              this.isDisable = true;
            }
          })
        }else {
          thumbsUp(getToken('userId'),this.blogID).then((res)=>{
            if(res.data.status === 200){
              this.isLiked = true;
              this.Num.likesNum++;
              this.isDisable = true;
            }
          })
        }
      }
      setTimeout(()=>{
        this.isDisable = false;
      },5000);
    },

    /*回复*/
    review(data,sign/*标记是子评论还是不是*/){
      this.$prompt('评论内容', '评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '评论成功',
        });
        this.add(data,value,sign);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    /*打开评论*/
    open(blogId,comment,value){
      if(comment === -1){
        if(this.view){
          this.view = false;
        }else{
          getComment(blogId,comment).then((res)=>{
              if(res.data.status === 200){
                res.data.data.forEach(com=>
                    {
                      if (com.hasChildrenComments) {
                        this.$set(com, 'children', []);
                      }
                    })
                this.data = JSON.parse(JSON.stringify(res.data.data))
                console.log(this.data);
                this.view = true;
              }
          })
        }
      }else {
        getComment(blogId,comment).then((res)=>{
          if(res.data.status === 200){
            res.data.data.forEach(com=>
            {
              if (com.hasChildrenComments) {
                this.$set(com, 'children', []);
              }
            })
            value.children = JSON.parse(JSON.stringify(res.data.data))
            console.log(this.data)
            this.view=true;
          }
        })
      }

    },

    /*增加评论工具类*/
    add(data,value,sign) {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      let hours = new Date().getHours();
      let minutes = new Date().getMinutes();
      let seconds = new Date().getSeconds();
      let newChild = {
          commentId: id++,
          authorIcon: getToken('userIcon'),
          authorNickName:getToken('userNickName'),
          deployTime: year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds,
          comment: value,
          blogId:this.blogID,
          parentId:-1,
        };
      if (sign === 0) {
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        newChild.parentId = data.commentId;
        data.children.push(newChild);
      }else {
        data.push(newChild);
      }
      setComment(newChild).then((res)=>{
        if(res.data.status === 200){

        }
      })
    },
    /*删除评论*/
    // remove(node, data) {
    //   const parent = node.parent;
    //   const children = parent.data.children || parent.data;
    //   const index = children.findIndex(d => d.id === data.id);
    //   children.splice(index, 1);
    // },
  },
/*创建时请求点赞数和评论数*/
  created() {
      getCount(this.blogID).then((res)=>{
        if(res.data.status === 200){
          this.Num = res.data.data
        }
      })
  }
};
</script>

<style >
.review .el-button:focus .review .el-button:hover,.review .el-button {
  background: transparent;
  border: 0px;
}
.fa-comments-o:hover, .fa-thumbs-o-up:hover,.fa-comment-o:hover{
  color: #409EFF;
}
.el-tree-node__content{
  height: 60px !important;
}
.custom-tree-node {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>